<template>
    <div class="main">
        <div>
            <div>
                轮播图
            </div>
            <div>
                <!-- <el-button type="primary" round>主要按钮</el-button> -->
                <el-button  @click="centerDialogVisible3 = true ; getCollectInfo();" icon="el-icon-plus" circle ></el-button>
            </div>
        </div>
        <div>
            <div class="card-parent" v-for="item in rotationList" :key="item"> 
                <div class="my-detail-recommend-card"> 
                    <div>
                        <el-image :src="agentPicture(item.picture,item.referer)">
                            <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                        </el-image>
                    </div>
                    <div>
                        <div>
                            <span>{{item.title}}</span>
                            <!-- <div>
                                <span>类型: </span><span> 热血{{item}}</span>
                            </div> -->
                        </div>
                        <!-- <div class="my_button">
                            <el-button plain size="small">开始阅读</el-button> 
                            <el-button plain size="small">取消订阅</el-button>
                        </div> -->
                    </div>
                </div>
                <div>
                    排序：<el-tag>{{item.sort}}</el-tag>
                </div>
                <div class="my_button">
                    <el-button plain size="small" @click="deleteRotationPicture(item.id)">删除</el-button> 
                    <el-button plain size="small" @click="centerDialogVisible2 = true; getRotationInfo(item); getCollectInfo();" >修改</el-button>
                    <el-button plain size="small" @click="centerDialogVisible1 = true; routerPushSearch(item.jumpurl,item.spiderId);" >预览</el-button>
                </div>
            </div>
            <div>
                <!-- 弹出框1-详细信息 -->
                <!-- <el-dialog title="详细信息" :visible.sync="centerDialogVisible1" width="30%" center>
                    <el-descriptions :column="1" border>
                        <el-descriptions-item label="代表图">夜for星空</el-descriptions-item>
                        <el-descriptions-item label="网站名称">男</el-descriptions-item>
                        <el-descriptions-item label="网址">www.dmzj.com</el-descriptions-item>
                        <el-descriptions-item label="源(防盗链)">www.dmzj.com</el-descriptions-item>
                        <el-descriptions-item label="章节条数(无则填-1)">-1</el-descriptions-item>
                        <el-descriptions-item label="上传用户">夜for星空</el-descriptions-item>
                        <el-descriptions-item label="描述">这是漫画之家,一个出名的免费看漫画网站!!</el-descriptions-item>
                    </el-descriptions>
                    <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible1 = false">确 认</el-button>
                    </span>
                </el-dialog> -->
                <!-- 弹出框2-修改-->
                <el-dialog title="修改信息" :visible.sync="centerDialogVisible2" width="30%" center>
                        <div class="card_dialog">
                            <div class="card-parent" v-for="item in collectInfoList" :key="item"> 
                                <div class="my-detail-recommend-card"> 
                                    <div>
                                        <el-image :src="agentPicture(item.picture,item.referer)">
                                            <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                                        </el-image>
                                    </div>
                                    <div>
                                        <div>
                                            <span>{{item.title}}</span>
                                            <!-- <div>
                                                <span>类型: </span><span> 热血{{item}}</span>
                                            </div> -->
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    收藏时间：{{item.createDate}}
                                </div>
                                <div class="my_button">
                                    <el-button plain size="small" @click="routerPushSearch(item.jumpurl,item.spiderId)">预览</el-button> 
                                    <el-button plain size="small" @click="selectComic(item)">选定</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="card_dialog2">
                            <div>
                                <div> 选 中:</div>
                                <div>
                                <el-input placeholder="请选择漫画" v-model="rotationInfo.title" :disabled="true" style="width:60%;"> </el-input>
                                <!-- {{'摇曳露营官方同人集'}} -->
                                </div>
                            </div>
                            <div>
                                <div> 排 序:</div>
                                <div>
                                    <el-input-number v-model="rotationInfo.sort" @change="handleChange" :min="1"  label="描述文字" style="width:60%;"></el-input-number>
                                </div>
                            </div>
                        </div>
                    <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible2 = false; clearComic();">取 消</el-button>
                            <el-button type="primary" @click="centerDialogVisible2 = false; editRotationPicture();">修 改</el-button>
                        </span>
                </el-dialog>
            </div>
        </div>
        <div>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :hide-on-single-page="pagehide"
            :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, prev, pager, next, sizes" :total="this.page.total"> </el-pagination>
        </div>
        <div>
            <!-- 弹出框-增加-->
            <el-dialog title="添加轮播图" :visible.sync="centerDialogVisible3" width="800px" center>
                <div class="card_dialog">
                    <div class="card-parent" v-for="item in collectInfoList" :key="item"> 
                        <div class="my-detail-recommend-card"> 
                            <div>
                                <el-image :src="agentPicture(item.picture,item.referer)">
                                    <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                                </el-image>
                            </div>
                            <div>
                                <div>
                                    <span>{{item.title}}</span>
                                    <!-- <div>
                                        <span>类型: </span><span> 热血{{item}}</span>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <div>
                            收藏时间：{{item.createDate}}
                        </div>
                        <div class="my_button">
                            <el-button plain size="small" @click="routerPushSearch(item.jumpurl,item.spiderId)">预览</el-button> 
                            <el-button plain size="small" @click="selectComic(item)">选定</el-button>
                        </div>
                    </div>
                </div>
                <div class="card_dialog2">
                    <div>
                        <div> 选 中:</div>
                        <div>
                           <el-input placeholder="请选择漫画" v-model="rotationInfo.title" :disabled="true" style="width:60%;"> </el-input>
                           <!-- {{'摇曳露营官方同人集'}} -->
                        </div>
                    </div>
                    <div>
                        <div> 排 序:</div>
                        <div>
                            <el-input-number v-model="rotationInfo.sort" @change="handleChange" :min="1"  label="描述文字" style="width:60%;"></el-input-number>
                        </div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible3 = false; clearComic()">取 消</el-button>
                            <el-button type="primary" @click="centerDialogVisible3 = false;addRotationPicture()">添 加</el-button>
                        </span>
            </el-dialog>
        </div>
    </div>
</template>


<script>
import LogoSrc from '@/assets/icon/comic.png'
import Api from '@/api/index';

export default {
  name: 'Carousel',
  data () {
    return {
        logo: LogoSrc,
        centerDialogVisible1: false, //详细信息
        centerDialogVisible2: false, //修改
        centerDialogVisible3: false, //新增
        num: 1,
        base:{
            userId: this.$store.state.common.userId,
            avatar: this.$store.state.common.avatar, 
        },
        //分页参数
        page: {
            index: 1,
            size: 10,
            total: 0,
            keyword: '',
        },
        //轮播图列表
        rotationList: [],
        //收藏漫画列表
        collectInfoList: [],
        //轮播图详细信息
        rotationInfo: {
            id: 0,
            userId: 0,
            userName: '',
            spiderId: 0,
            title: '',
            author: '',
            picture: '',
            referer: '',
            jumpurl: '',
            jumpType: null, //跳转类型,目前暂时默认为0
            updateState: '',
            updateSum: null,
            updateChapter: '',
            type: '',
            country: null,
            describe: null,
            state: null,
            collectNum: null,
            typeTable: 1, //类型,0-轮播图 1-推荐漫画,这里全部设置为1
            sort: 1 // 排序默认为1
        }
    }
  },
  computed:{
    // num2不是函数
    pagehide:{
        // 当计算属性要修改时先触发set方法
        // 读取当前计算属性的值，get方法可以隐藏，默认进入的是get方法
        get:function(){
            if(this.page.total <= 0){
                return true;
            }else{
                return false;
            }
        },
        // set:function(val){
        //     this.num = val;
        //     console.log('val',val)
        // }
    }
  },
  methods: {
    //图片代理
    agentPicture(url,referer){
        let agentUrl = Api.APIROOT + '/agentController/forwardPicture?url=' + url + '&referer=' + referer
        return agentUrl
    },
    //点击跳转界面
    routerPushSearch(url,pyId){
        let newWindow = this.$router.resolve({path: '/detail/' + pyId,
                        query: {
                                url: url
                                }
        })
        window.open(newWindow.href,'_blank')
    },
    //分页值修改
    handleSizeChange(val) {
        this.page.size=val;
        this.getTableInfo();
    },
    handleCurrentChange(val) {
        //当前为第几页时调用getTabelInfo()显示第几页数据
        this.page.index=val;
        this.currentPage=val;
        this.getTableInfo();
    },
    //获取录播图列表
    getTableInfo(){
        //初始化界面,获取获取录播图列表
        Api.getMainPageControllerQueryCollectComicPageResource(this.page.index, this.page.size, this.page.keyword).then(response => {
            if(response.data.code = 200){
                this.rotationList = response.data.data.data
                this.page.total = Number(response.data.data.total)              
            }
        })
    },
    //获取当前用户收藏漫画
    getCollectInfo(){
        //初始化,获取用户的收藏漫画
        Api.getMainPageControllerCoCollectInfoListByUserResource(this.base.userId).then(response => {
            if(response.data.code == 200){
            this.collectInfoList = response.data.data
            }
        })
    },
    //新增推荐漫画
    addRotationPicture(){
        let {id, ...data} = this.rotationInfo
        Api.getOperationControllerAddAndEditCollectComicResource(data).then(response => {
            if(response.data.code == 200){
                this.$notify({
                        title: '提示',
                        message: "新增成功",
                        position: 'bottom-left',
                        type: 'success'
                    });
                    this.$router.go(0)
            }
        },error => {
            this.$notify({
                  title: '提示',
                  message: '新增失败',
                  position: 'bottom-left',
                  type: 'error'
              });
              this.$router.go(0)
        })
    },
    //修改推荐漫画
    editRotationPicture(){
        let data = this.rotationInfo
        Api.getOperationControllerAddAndEditCollectComicResource(data).then(response => {
            if(response.data.code == 200){
                this.$router.go(0)
                this.$notify({
                        title: '提示',
                        message: "修改成功",
                        position: 'bottom-left',
                        type: 'success'
                    });
            }
        },error => {
            this.$router.go(0)
            this.$notify({
                  title: '提示',
                  message: '修改失败',
                  position: 'bottom-left',
                  type: 'error'
              });
        })
    },
    //删除轮播图或推荐漫画
    deleteRotationPicture(id) {
        this.$confirm('是否确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            Api.getOperationControllerDeleteOtherPicturePictureResource(id).then(response => {
               if(response.data.code == 200){
                    this.$router.go(0)
                    this.$notify({
                        title: '提示',
                        message: "删除成功",
                        position: 'bottom-left',
                        type: 'success'
                    });
               }
            },error => {
                //获取搜索内容
                this.$notify({
                    title: '提示',
                    message: '删除失败',
                    position: 'bottom-left',
                    type: 'error'
                });
            })
        }).catch(() => {         
        });
    },
    //获取推荐漫画信息
    getRotationInfo(item) {
        let {createDate,createUser,updateUser,updateDate,isDeleted, ...data} = item;
        this.rotationInfo = data;
    },
    //选定某部漫画
    selectComic(rotationInfo){
        this.rotationInfo.spiderId = rotationInfo.spiderId
        this.rotationInfo.title = rotationInfo.title
        this.rotationInfo.author = rotationInfo.author
        this.rotationInfo.picture = rotationInfo.picture 
        this.rotationInfo.referer = rotationInfo.referer
        this.rotationInfo.jumpurl = rotationInfo.jumpurl
        this.rotationInfo.updateState = rotationInfo.updateState
        this.rotationInfo.updateSum = rotationInfo.updateSum
        this.rotationInfo.updateChapter = rotationInfo.updateChapter
        this.rotationInfo.type = rotationInfo.type
        this.rotationInfo.country = rotationInfo.country
        this.rotationInfo.describe = rotationInfo.describe
        this.rotationInfo.state = rotationInfo.state
        this.rotationInfo.collectNum = rotationInfo.collectNum
    },
    //清空数据
    clearComic(){
        this.rotationInfo = {
            id: 0,
            userId: 0,
            userName: '',
            spiderId: 0,
            title: '',
            author: '',
            picture: '',
            referer: '',
            jumpurl: '',
            jumpType: null, //跳转类型,目前暂时默认为0
            updateState: '',
            updateSum: null,
            updateChapter: '',
            type: '',
            country: null,
            describe: null,
            state: null,
            collectNum: null,
            typeTable: 1, //类型,0-轮播图 1-推荐漫画,这里全部设置为1
            sort: 1 // 排序默认为1
        }
    }
  },
  mounted() {
      //初始化界面,获取获取录播图列表
      this.getTableInfo()
  }
}
</script>

<style scoped>
.main{
    display: flex;
    flex-direction: column;
    /* justify-content: flex-start; */
    align-items: flex-start;
}
.el-avatar{
    box-shadow: 0px 0px 5px 1px rgb(223, 223, 223);
}
.main > div:nth-child(1){
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6em;
    margin: 0px 0px 30px 0px;
    font-weight: 1000;
    display: flex;
    /* flex-direction: row; */
    justify-content: space-between;
    align-content: space-between;
    width: 100%;
}
.main > div:nth-child(2){
    width: 100%;
}
/** 分页样式 */
.main > div:nth-child(3){    
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/** 卡条样式 */
.card-parent{
    height: 120px;
    width: 100%;
    display: flex;
    flex-direction: row;
    /* align-content: center; */
    justify-content: space-between;
    margin-top: 20px;
}
.card-parent > div:nth-child(2){
    height: min-content;
    margin-top:auto;
    margin-bottom:auto;
    margin-right: 10%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    font-weight: 550;
}
/**卡片样式 */
.my-detail-recommend-card{
    /* margin-top: 16px; */
    width: 261px;
    height: 120px;
    display: flex;
    flex-direction: row;
    /* padding: 4px 0px 4px 0px; */
}
.my-detail-recommend-card > div:first-child .el-image {
    width: 90px;
    height: 120px;
}
.my-detail-recommend-card > div:nth-child(2){
    width: 181px;
    height: 106px;
    margin-left: 12px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}  
/** 按钮样式 */
.my_button{
    width: 25%;
    height: max-content;
    display: flex;
    flex-direction: row;
    margin-top:auto;
    margin-bottom:auto;
}
.my_button > .el-button{
    width: 45%;
}

/** 其他*/
.card-parent:hover{
    background-color: rgb(241, 241, 241);
    /* box-shadow: -2px 2px 2px 2px rgb(235, 235, 235); */
}
.card-parent:active{
    background-color: rgb(241, 241, 241);
    /* box-shadow: -2px 2px 2px 2px rgb(196, 196, 196); */
}
.card_dialog{
    overflow: auto;
    height: 300px;
    box-shadow: 0px 0px 5px 1px rgb(211, 211, 211);
}
.card-parent{
    height: 120px;
    width: 100%;
    display: flex;
    flex-direction: row;
    /* align-content: center; */
    justify-content: space-between;
    margin-top: 20px;
}
.card-parent > div:nth-child(2){
    height: min-content;
    margin-top:auto;
    margin-bottom:auto;
    margin-right: 10%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    font-weight: 550;
}
.card_dialog2 {
    width: 100%;
    height: min-content;    
    box-shadow: 0px 0px 5px 1px rgb(211, 211, 211);
}
.card_dialog2 > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 15px;
    padding: 5px 0px 5px 0px;
    box-sizing: border-box;
}
.card_dialog2 > div > div:nth-child(1){
    width: 50%;
    height: min-content;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.3em;
    font-weight: 600;
}
.card_dialog2 > div > div:nth-child(2){
    width: 50%;
    height: min-content;   
    display: flex;
    justify-content: center; 
}

</style>